// 故障业务
<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="故障业务"
      :visible="dialogVisible"
      width="1200px"
      class="BusinessList-dialog"
      @close="close"
    >
      <div class="flex-column">
        <template v-if="nodes.length > 0">
          <vis-view
            id="faultBusinessTopo"
            :nodes="nodes"
            :edges="edges"
            :show-eagel-eye="false"
            @selectEdge="selectEdge"
            @selectNode="selectNode"
          />
        </template>
        <div v-if="!loading && nodes.length < 1" class="flex align-center h-100 justify-center">暂无数据</div>
      </div>
    </el-dialog>
    <!-- 通道列表 -->
    <segment-detail
      :visible="showSegment"
      :row-data="rowData"
      show-type="restore"
      @restore="restore"
      @close="showSegment = false"
    />
  </div>
</template>
<script>
  import damageTopoData from "../data/damageTopo.js";
  import { formatEdges, formatNodes } from '@/components/vis-view/js/format'
  import VisView from '@/components/vis-view'
  import SegmentDetail from './SegmentDetail'

  export default {
    components: {
      VisView,
      SegmentDetail
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      node: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        loading: true,
        rowData: {},
        showSegment: false,
        goBackPath: '',
        nodes: [],
        edges: []
      }
    },
    mounted() {
      this.node.nodeId && this.getTopos()
    },
    methods: {
      getTopos() {
        const {nodes, edges} = damageTopoData
        this.nodes = formatNodes(nodes)
        this.edges = formatEdges(edges)
        console.log('故障拓扑数据', this.nodes, this.edges)
      },
      // 连线点击事件弹出故障业务详情
      selectEdge(obj) {
        console.log(obj)
        if (obj.mouseStatus === 'CANCEL') return
        const edgeData = this.edges.find(i => i.id === obj.id)
        this.rowData = {
          bizId: edgeData.bizInfo.bizId,
          bizName: edgeData.label
        }
        this.showSegment = true
      },
      selectNode(obj) {
        console.log(obj)
      },
      // 智能恢复
      restore(data) {
        this.close() // 关闭topo图弹窗
        this.showSegment = false // 关闭通道弹窗
        this.$emit('restore', {
          bizData: {
            ...this.rowData,
            channelList: data
          },
          operateType: 'restore'
        })
      },
      close() {
        this.$emit('update:dialogVisible', false)
      },
      goBack() {
        this.$router.push({
          path: this.goBackPath
        })
      }
    }
  }
</script>
<style lang="scss">
.BusinessList-dialog .el-dialog__body{
 height: 50vh;
}
</style>
